{% load static %}
<div id="About" class="my-hidden">
    <div id="string1"></div>
    <div id="string2"></div>
    <div id="block">
        <div id="block-top">About
            <span class="iconfont close">&#xe600;</span></div>
        <div id="block-bottom">
            <strong style="font-size: 16px;height: 20px;color: white;">亲爱的朋友:</strong>
            <br>
            <p>
                你好呀!欢迎来到0318-SPACE,本站是博主的个人网站,建站的初衷是因为---实在不想继续web开发了(当然不是说我的web开发水平已经炉火纯青了哈哈哈),在这1年(2020-2021)多的时间里,我都在web开发里打转转,基本上没有学新东西了,所以为了体验新鲜感,但又感觉就这样"一走了之"不太好,所以就索性建立了该站,也算是对所学的web开发的知识点一个总结性应用,俗话说:雁过留名,人过留声.总之,也算是对我曾经学习过web开发的一个见证吧!</p>
            <p>
                本站的核心功能是管理博客,想到自己从学编程开始,多多少少也写了不少代码,但是基本上都"压箱底"了,很少再去看过,于我来说,这些可都是我曾经的累累战果呀哈哈哈,所以为了不让它们失去原有的"光辉",就打算给它们一次重见天日的机会哈哈,本站也基本上实现了对博客的发布,修改,删除等基本功能,也算是实现了对我代码的一个诺言.</p>
            <p>
                我相信学习编程的小伙伴也有和我同样的境遇,所以为了你自己心爱的代码,我也希望大家能踊跃加入我的网站,和我一起编辑,发布自己的博客,随笔,学习心得等等,希望能遇到更多志同道合的朋友,一起学习,一起成长!</p>

            <span id="author">LLL</span>

        </div>
    </div>
</div>

<style>
   #About{width:75%;max-height:600px;position:fixed;top:-900px;z-index:10001!important}#About #string1,#About #string2{height:100px;width:10px;background-color:#2aabd2;position:absolute;left:10%}#About #string2{left:88%}#About #block{border:1px solid silver;position:relative;top:100px;background-color:#2aabd2}#About #block #block-top{height:10%;position:relative;line-height:30px;padding-left:30px;font-size:30px;color:#fff!important}#About #block #block-top{line-height:50px;padding-left:5%}#About #block #block-top .iconfont{width:30px;height:30px;font-size:30px;position:absolute;right:5%;opacity:.7;line-height:50px!important;color:white}#About #block #block-top .iconfont:hover{opacity:1}#About #block #block-bottom{height:90%;border-top:1px solid silver;padding:10px;background-color:#20c997;padding-bottom:20%;position:relative}#About #block #block-bottom p{text-indent:2em;margin:0!important;display:inline-block;color:white;line-height:30px}#author{position:absolute;bottom:10%;right:10%;font-size:1.5rem;color:white;font-weight:600;letter-spacing:.5em}

</style>

<script>
    $(function () {
        let About = document.getElementById('About');
        About.style.left = (window.innerWidth - About.offsetWidth) / 2 + 'px';
        let AboutBu = document.getElementById('AboutBu');
        let AboutClose = About.getElementsByClassName('iconfont')[0];
        var AboutNUm = 0;
        AboutBu.onclick = function () {
            if (AboutNUm % 2 === 0) {
                perfectMove(About, {top: 0,}, null);
            } else {
                perfectMove(About, {top: -900,}, null);
            }
            AboutNUm += 1;
        }
        AboutClose.onclick = function () {
            perfectMove(About, {top: -900,}, null);
            AboutNUm += 1;
        }
    })
</script>